<template>
  <div class="app-pro-basicLayout-content-wrap">
    <div class="app-pro-pages-content" style="background:#fff;">
      <div class="tree-box">
        <div class="tree-box-btn">
          <el-button size="mini" type="primary" @click="() => append()">증가하다</el-button>
        </div>
        <el-tree
          :data="treeData"
          node-key="id"
          :props="defaultProps"
          default-expand-all
          :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span style="font-size:16px">{{ node.label }}</span>
            <span>
              <el-button
                type="text"
                @click="() => append(data)">
                증가하다
              </el-button>
              <el-button
                type="text"
                style="color:#e6a23c"
                @click="() => update(data)">
                추가
              </el-button>
              <el-popconfirm
                title="삭제하시겠습니까"
                placement="right"
                style="margin-left:10px"
                @onConfirm="remove(node, data)"
                :confirmButtonText="'확인'|language"
                :cancelButtonText="'취소'|language"
              >
                <el-button
                  slot="reference"
                  type="text"
                  style="color:#f56c6c">
                  삭제
                </el-button>
              </el-popconfirm>
            </span>
          </span>
        </el-tree>
      </div>
    </div>
  </div>
</template>

<script>
import * as shapeApi from '@/api/setting/shape'
export default {
  name: 'setting-shape',
  data () {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id'
      }
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      shapeApi.getShapeList().then(res => {
        this.treeData = res
      })
    },
    update (data) {
      this.$prompt('이름을 입력하십시오.', '힌트', {
        confirmButtonText: '확인',
        cancelButtonText: '취소'
      }).then(({ value }) => {
        if (value) {
          const parmas = {}
          parmas.name = value
          parmas.pid = data.pid || 0
          if (data) {
            parmas.id = data.id
          }
          shapeApi.saveShape(parmas).then(res => {
            this.getData()
          })
        } else {
          this.$message({
            type: 'warning',
            message: '이름을 입력하십시오.'
          })
        }
      }).catch(() => {

      })
    },
    append (data) {
      this.$prompt('이름을 입력하십시오.', '힌트', {
        confirmButtonText: '확인',
        cancelButtonText: '취소'
      }).then(({ value }) => {
        if (value) {
          const parmas = {}
          parmas.name = value
          parmas.pid = data.id || 0
          shapeApi.saveShape(parmas).then(res => {
            this.getData()
          })
        } else {
          this.$message({
            type: 'warning',
            message: '이름을 입력하십시오.'
          })
        }
      }).catch(() => {

      })
    },
    remove (node, data) {
      shapeApi.deleteShape({ id: data.id }).then(res => {
        this.getData()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .tree-box {
    width: 500px;
    margin: 0 auto;
    padding: 20px 0;
  }
  .tree-box-btn {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
